<template>
  <div class="custom-pagination" v-if="total > 0">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      :background="background"
      :small="small"
      :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :prev-text="prevText"
      :next-text="nextText"
      class="pagination-wrapper"
    >
      <template #total>
        <span class="pagination-total">
          总共 {{ total }} 条记录，共 {{ Math.ceil(total / pageSize) }} 页
        </span>
      </template>
      <template #jumper>
        <span class="pagination-jumper">
          前往
          <el-input
            size="small"
            class="pagination-input"
            :model-value="jumperValue"
            @input="handleJumperInput"
            @keyup.enter="handleJumperEnter"
          />
          页
        </span>
      </template>
      <template #sizes>
        <span class="pagination-sizes">
          每页
          <el-select
            :model-value="pageSize"
            @change="handleSizeChange"
            size="small"
            class="pagination-select"
          >
            <el-option
              v-for="size in pageSizes"
              :key="size"
              :label="`${size} 条`"
              :value="size"
            />
          </el-select>
        </span>
      </template>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CustomPagination',
  props: {
    // 当前页数
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示条目个数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总条目数
    total: {
      type: Number,
      required: true
    },
    // 每页显示个数选择器的选项设置
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    // 组件布局，子组件名用逗号分隔
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    // 是否为分页按钮添加背景色
    background: {
      type: Boolean,
      default: true
    },
    // 是否使用小型分页样式
    small: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 只有一页时是否隐藏
    hideOnSinglePage: {
      type: Boolean,
      default: false
    },
    // 替换图标显示的上一页文字
    prevText: {
      type: String,
      default: '上一页'
    },
    // 替换图标显示的下一页文字
    nextText: {
      type: String,
      default: '下一页'
    }
  },
  emits: ['update:currentPage', 'update:pageSize', 'size-change', 'current-change'],
  data() {
    return {
      jumperValue: ''
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('update:pageSize', val)
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('update:currentPage', val)
      this.$emit('current-change', val)
    },
    handleJumperInput(val) {
      this.jumperValue = val
    },
    handleJumperEnter() {
      const page = parseInt(this.jumperValue)
      const maxPage = Math.ceil(this.total / this.pageSize)
      
      if (page && page >= 1 && page <= maxPage) {
        this.handleCurrentChange(page)
        this.jumperValue = ''
      } else {
        this.$message.warning(`请输入 1 到 ${maxPage} 之间的页码`)
        this.jumperValue = ''
      }
    }
  }
}
</script>

<style scoped>
.custom-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-total {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.pagination-sizes {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  gap: 8px;
}

.pagination-select {
  width: 80px;
}

.pagination-jumper {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  gap: 8px;
}

.pagination-input {
  width: 60px;
}

/* 自定义分页按钮样式 */
:deep(.el-pagination) {
  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: #ffffff;
  --el-pagination-text-color: #606266;
  --el-pagination-border-radius: 6px;
  --el-pagination-button-width: 36px;
  --el-pagination-button-height: 36px;
  --el-pagination-button-disabled-color: #c0c4cc;
  --el-pagination-button-disabled-bg-color: #ffffff;
  --el-pagination-hover-color: #3b82f6;
  --el-pagination-hover-bg-color: #f0f7ff;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
  transition: all 0.3s ease;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  background: #f0f7ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

:deep(.el-pagination .el-pager li) {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
  transition: all 0.3s ease;
  margin: 0 2px;
}

:deep(.el-pagination .el-pager li:hover) {
  background: #f0f7ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-pagination {
    padding: 12px;
  }
  
  .pagination-wrapper {
    gap: 12px;
    justify-content: center;
  }
  
  .pagination-total,
  .pagination-sizes,
  .pagination-jumper {
    font-size: 12px;
  }
  
  :deep(.el-pagination) {
    --el-pagination-font-size: 12px;
    --el-pagination-button-width: 32px;
    --el-pagination-button-height: 32px;
  }
}
</style> 